<!DOCTYPE html>
<html lang="zh-cn">
    <head><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='尝试使用git、hugo两个工具在gitee上搭建自己的个人博客，本文是对搭建过程的一个总结。
'><title>利用hugo在gitee上构建静态博客</title>

<link rel='canonical' href='https://canyellow.gitee.io/p/%E5%88%A9%E7%94%A8hugo%E5%9C%A8gitee%E4%B8%8A%E6%9E%84%E5%BB%BA%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/'>

<link rel="stylesheet" href="/scss/style.min.css"><meta property='og:title' content='利用hugo在gitee上构建静态博客'>
<meta property='og:description' content='尝试使用git、hugo两个工具在gitee上搭建自己的个人博客，本文是对搭建过程的一个总结。
'>
<meta property='og:url' content='https://canyellow.gitee.io/p/%E5%88%A9%E7%94%A8hugo%E5%9C%A8gitee%E4%B8%8A%E6%9E%84%E5%BB%BA%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/'>
<meta property='og:site_name' content='CanYellow&#39;s Blog'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:tag' content='git' /><meta property='article:tag' content='hugo' /><meta property='article:tag' content='gitee' /><meta property='article:tag' content='PicGo' /><meta property='article:tag' content='static web page' /><meta property='article:published_time' content='2021-07-19T22:24:14&#43;08:00'/><meta property='article:modified_time' content='2021-07-19T22:24:14&#43;08:00'/>
<meta name="twitter:title" content="利用hugo在gitee上构建静态博客">
<meta name="twitter:description" content="尝试使用git、hugo两个工具在gitee上搭建自己的个人博客，本文是对搭建过程的一个总结。
">
    </head>
    <body class="
    article-page has-toc
">
    <script>
        (function() {
            const colorSchemeKey = 'StackColorScheme';
            if(!localStorage.getItem(colorSchemeKey)){
                localStorage.setItem(colorSchemeKey, "auto");
            }
        })();
    </script><script>
    (function() {
        const colorSchemeKey = 'StackColorScheme';
        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

        if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
            

            document.documentElement.dataset.scheme = 'dark';
        } else {
            document.documentElement.dataset.scheme = 'light';
        }
    })();
</script>
<div class="container main-container flex 
    
        extended
    
">
    
        <div id="article-toolbar">
            <a href="https://canyellow.gitee.io" class="back-home">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="15 6 9 12 15 18" />
</svg>



                <span>返回</span>
            </a>
        </div>
    
<main class="main full-width">
    <article class="main-article">
    <header class="article-header">

    <div class="article-details">
    
    <header class="article-category">
        
            <a href="/categories/web-page/" >
                Web Page
            </a>
        
    </header>
    

    <h2 class="article-title">
        <a href="/p/%E5%88%A9%E7%94%A8hugo%E5%9C%A8gitee%E4%B8%8A%E6%9E%84%E5%BB%BA%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/">利用hugo在gitee上构建静态博客</a>
    </h2>

    <footer class="article-time">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



        <time class="article-time--published">Jul 19, 2021</time>
    </footer></div>
</header>

    <section class="article-content">
    <p>尝试使用git、hugo两个工具在gitee上搭建自己的个人博客，本文是对搭建过程的一个总结。</p>
<h3 id="下载hugo并在本地配置好博客目录">下载hugo，并在本地配置好博客目录</h3>
<ol>
<li>到Github上Hugo项目的<a class="link" href="https://github.com/gohugoio/hugo/releases"  target="_blank" rel="noopener"
    >Release页面</a>下载Hugo的最新稳定版本，我这里下载的是<em>hugo_0.85.0_Windows-64bit.zip</em>。</li>
<li>在个人电脑上期望的位置建立目录，作为网页数据的目录，这里我以<code>F:\xxx\MyBlog</code>代替.</li>
<li>将Hugo解压到上面的目录。这时目录里的文件树应该是下面这样：</li>
</ol>
<pre><code>F:\xxx\MyBlog
|_hugo.exe
|_LICENSE
|_README.md
</code></pre><ol start="4">
<li>hugo生成本地站点，</li>
</ol>
<pre><code>hugo new site #在当前目录生成站点
</code></pre><p>此时目录结构变为：</p>
<pre><code>F:\xxx\MyBlog
|_archetypes
|_content
|_data
|_layouts
|_static
|_themes
|_config.toml
|_hugo.exe
|_LICENSE
|_README.md
</code></pre><ol start="5">
<li>到hugo中文站点的<a class="link" href="https://www.gohugo.org/theme/"  target="_blank" rel="noopener"
    >主题页面</a>找自己喜欢的主题，我选中了<code>hugo-theme-stack</code>这款主题，到主题的github主页，将所有文件下载下来，把下载下来的文件解压到theme文件夹内。目录结构如下：</li>
</ol>
<pre><code>F:\xxx\MyBlog
|_...
|_themes
  |_hugo-theme-stack
    |_...
</code></pre><ol start="6">
<li>hugo生成本地测试站点</li>
</ol>
<pre><code>hugo server --theme=hugo-theme-stack -D #生成测试站点
</code></pre><p>此时在目录下多了<code>public</code>文件夹，里面就是静态站点的所有内容，可以通过 https://localhost:1313 在浏览器中访问测试站点。</p>
<h3 id="在gitee上准备好相关仓库与安全设置">在gitee上准备好相关仓库与安全设置</h3>
<ol>
<li>登录gitee</li>
<li>创建与账户同名的博客仓库，比如我的就是<code>canyellow</code>.</li>
<li>创建一个图床仓库，比如我的是<code>MyPic</code>,并勾选初始化成<code>master</code>分支。</li>
</ol>
<h3 id="安装并配置git">安装并配置git</h3>
<ol>
<li>下载git，我用的是cygwin这个windows下面的linux shell环境，在里面安装git的</li>
<li>先配置全局账户</li>
</ol>
<pre><code>git config --global user.name &quot;你的名字或昵称&quot;
git config --global user.email &quot;你的邮箱&quot;
</code></pre><ol start="3">
<li>设置ssh密钥</li>
</ol>
<pre><code>ssh-keygen -t rsa -C “xxxxx@xxxxx.com” #建议填写真实邮箱，后面的提问，留空即可
</code></pre><p>然后进入.ssh目录，查看*.pub文件，将里面的内容添加到gitee账户资料中安全设置的ssh公钥中。再确认是否正确</p>
<pre><code>ssh -T git@gitee.com
</code></pre><p>返回<code>Welcome to Gitee.com, yourname!</code>或<code>You’ve successfully authenticated, but GITEE.COM does not provide she ll access.</code>则证明添加成功。
4. 初始化本地目录
<code>cd</code>到<code>public</code>目录，执行</p>
<pre><code>cd public
git init
git remote add origin git@gitee.com:xxx/xxx.git #改成你自己的项目地址
# git remote rm origin # 删除orgin重现添加。
git pull origin master
git add .
git commit -m “第一次提交”
git push origin master
# 然后如果需要账号密码的话就输入账号密码，这样就完成了一次提交。
</code></pre><h3 id="安装并配置pickgo">安装并配置PickGo</h3>
<ol>
<li>到<a class="link" href="https://github.com/Molunerfinn/PicGo/releases"  target="_blank" rel="noopener"
    >PicGo的github项目发布页</a>下载安装文件</li>
<li>安装gitee上传插件
因为Picgo安装gitee上传插件一直失败，只能手动安装（可能是权限问题，或者没有安装nodejs的原因），我的node是免安装版，所以略显麻烦。</li>
</ol>
<pre><code>set Path=%path;&quot;nodejs的目录&quot; #添加nodejs的运行目录到临时环境变量
cd cd C:\Users\XXX\&quot;用户名&quot;\Roaming\picgo
npm install picgo-plugin-gitee-uploader #插件还有其他的，可以在PicGo里面搜索到，粘贴进来，不要带版本号
</code></pre><p>以上是事后整理，以做备忘，供参考！</p>
<p>参考链接：
<a href="https://blog.csdn.net/qq_41837900/article/details/90698478">https://blog.csdn.net/qq_41837900/article/details/90698478</a></p>
<p><a href="https://blog.csdn.net/lunhui601/article/details/107722580">https://blog.csdn.net/lunhui601/article/details/107722580</a></p>
<p><a href="https://zhuanlan.zhihu.com/p/102594554">https://zhuanlan.zhihu.com/p/102594554</a></p>
<p><a href="https://blog.csdn.net/github_37538357/article/details/60468050">https://blog.csdn.net/github_37538357/article/details/60468050</a></p>
</section>


    <footer class="article-footer">
    
    <section class="article-tags">
        
            <a href="/tags/git/">git</a>
        
            <a href="/tags/hugo/">hugo</a>
        
            <a href="/tags/gitee/">gitee</a>
        
            <a href="/tags/picgo/">PicGo</a>
        
            <a href="/tags/static-web-page/">static web page</a>
        
    </section>


    
    <section class="article-copyright">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>



        <span>Licensed under CC BY-NC-SA 4.0</span>
    </section>
    </footer>

    
</article>

    <aside class="related-contents--wrapper">
    
    
</aside>

     
     
        
    <div class="disqus-container">
    <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "CanYellow" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>

<style>
    .disqus-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }
</style>

<script>
    window.addEventListener('onColorSchemeChange', (e) => {
        if (DISQUS) {
            DISQUS.reset({
                reload: true
            });
        }
    })
</script>

    

    <footer class="site-footer">
    <section class="copyright">
        &copy; 
        
            2020 - 
        
        2021 CanYellow&#39;s Blog
    </section>
    
    <section class="powerby">
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="2.5.0">Stack</a></b> designed by <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
    </section>
</footer>

    
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo="crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU="crossorigin="anonymous"
                defer="true"
                >
            </script><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css"integrity="sha256-c0uckgykQ9v5k&#43;IqViZOZKc47Jn7KQil4/MP3ySA3F8="crossorigin="anonymous"
            ><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css"integrity="sha256-SBLU4vv6CA6lHsZ1XyTdhyjJxCjPif/TRkjnsyGAGnE="crossorigin="anonymous"
            >

            </main>
    
        <aside class="sidebar right-sidebar sticky">
            <section class="widget archives">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <line x1="5" y1="9" x2="19" y2="9" />
  <line x1="5" y1="15" x2="19" y2="15" />
  <line x1="11" y1="4" x2="7" y2="20" />
  <line x1="17" y1="4" x2="13" y2="20" />
</svg>



                </div>
                <h2 class="widget-title section-title">目录</h2>
                
                <div class="widget--toc">
                    <nav id="TableOfContents">
  <ol>
    <li>
      <ol>
        <li><a href="#下载hugo并在本地配置好博客目录">下载hugo，并在本地配置好博客目录</a></li>
        <li><a href="#在gitee上准备好相关仓库与安全设置">在gitee上准备好相关仓库与安全设置</a></li>
        <li><a href="#安装并配置git">安装并配置git</a></li>
        <li><a href="#安装并配置pickgo">安装并配置PickGo</a></li>
      </ol>
    </li>
  </ol>
</nav>
                </div>
            </section>
        </aside>
    

        </div>
        <script 
                src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g="crossorigin="anonymous"
                defer="false"
                >
            </script><script type="text/javascript" src="/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

    </body>
</html>
